<!--
 * @description  : 报表-首页
 * @descriptionDetail : 报表-首页
 * @author       : bln
 * @create       : 2024-10-08 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999" />
    <!-- #endif -->
    <u-tabs :list="tabList" :is-scroll="false" :show-bar="false" :current="current" @change="tabChange" />
    <form-section title="数据分析"></form-section>
    <view class="u-m-b-20" v-if="showPage">
      <!--零售户-->
      <u-grid :col="2" :border="false">
        <u-grid-item v-for="(item,index) in retailer" :key="index+'retailer'" @click="viewDetail(item)">
          <view class="u-m-b-16"><span class="title">{{ item.name }}</span></view>
          <view class="u-m-b-20"><span class="num retailer">{{ item.total }}</span><span class="unit">{{ item.unit }}</span></view>
          <view class="rate reduce">{{ item.rateDvalue }}</view>
        </u-grid-item>
      </u-grid>
      <!--案件-->
      <u-grid :col="2" :border="false">
        <u-grid-item v-for="(item,index) in caseList" :key="index+'case'" @click="viewDetail(item)">
          <view class="u-m-b-16"><span class="title"><img :src="require(`@/static/case/${pageConfig[item.reportCode].circle}.png`)">{{ item.name }}</span></view>
          <view class="u-m-b-20 u-m-l-20"><span class="num">{{ item.total }}</span><span class="unit">{{ item.unit }}</span></view>
          <view class="rate rise u-m-l-20">{{ item.rateDvalue }}<img v-if="pageConfig[item.reportCode].showSign" :src="require(`@/static/case/${item.rateDvalue >= 0 ? 'rise' : 'reduce'}.png`)"></view>
        </u-grid-item>
      </u-grid>
      <!--证件基础-->
      <u-grid :col="2" :border="false">
        <u-grid-item v-for="(item,index) in basic" :key="index+'retailer'" @click="viewDetail(item)">
          <view class="u-m-b-16"><span class="title"><img :src="require(`@/static/case/${pageConfig[item.reportCode].circle}.png`)">{{ item.name }}</span></view>
          <view class="u-m-b-20 u-m-l-20"><span class="num">{{ item.total }}</span><span class="unit">{{ item.unit }}</span></view>
          <view class="rate rise u-m-l-20">{{ item.rateDvalue }}</view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>
<script>
import moment from 'moment'
import { pageConfig } from './config'
import FormSection from '@/components/form-section.vue'
import queryService from '@/service/query/query.service.js'

export default {
  components: { FormSection },
  data() {
    return {
      showPage: false,
      pageConfig,
      current: 0,
      basic: [],
      retailer: [],
      caseList: [],
      tabList: [
        { name: '年累计', startDate: moment().startOf('year').format('YYYY-MM-DD') }, 
        { name: '本月', startDate: moment().startOf('month').format('YYYY-MM-DD') },
        { name: '本日', startDate: moment().format('YYYY-MM-DD') }
      ]
    }
  },
  mounted() {
    this.tabChange(0)
  },
  methods: {
    // 切换选中项
    tabChange(index) {
      this.current = index
      this.$u.loading('加载中...')
      queryService.report.getMobileHReportDatas({
        reportCode: 'LIC_DATA_ANALYSIS_SY_STATISTICS',
        reportParas: {
          startDate: this.tabList[index].startDate, 
          endDate: moment().format('YYYY-MM-DD')
        }
      }).then(dr => {
        const { data = [], success } = dr
        if (success) {
          this.showPage = true
          this.basic = data[0].commonDetailList.filter(item => item.type === 'basic')
          this.retailer = data[0].commonDetailList.filter(item => item.type === 'lic')
          this.caseList = data[0].commonDetailList.filter(item => item.type === 'case')
        }
        this.$u.hideLoading()
      }).catch(er => {
        this.$u.toast(er)
        this.$u.hideLoading()
      })
    },
    // 查看详情
    viewDetail(item) {
      if(!this.pageConfig[item.reportCode]?.path) {
        return this.$u.toast('页面暂未开发！')
      }
      this.setRouteParam({
        startDate: this.tabList[this.current].startDate,
        endDate: moment().format('YYYY-MM-DD'),
        ...item
      })
      this.$u.route({
        url: `/pages/case/reportForm/${this.pageConfig[item.reportCode].path}`
      })
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .u-grid {
  margin-bottom: 20rpx;
  border: 1px solid #ecf5ff;
  box-shadow: 6rpx 6rpx 10rpx #ecf5ff;
  .u-grid-item-box {
    display: block!important;
    padding: 30rpx 0rpx 30rpx 50rpx!important;
  }
  .title {
    font-size: 32rpx;
    margin-right: 20rpx;
    img {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }
  }
  .unit {
    font-size: 30rpx;
  }
  .num {
    font-size: 44rpx;
    font-weight: 700;
    margin-right: 10rpx;
  }
  .retailer {
    color: #1890ff;
  }
  .rate {
    font-size: 28rpx;
    display: flex;
    align-items: center;
    img {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
    }
  }
  .rise {
    color: #59bc81;
  }
  .reduce {
    color: #f75053
  }
}
</style>